<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>知领互联银行汇款转账交易系统</title>

    <!--1.引入bootstrap样式框架；-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!--2.引入angularJS分页样式的框架；-->
    <link rel="stylesheet" href="angularjs/pagination.css">

    <link rel="stylesheet" href="layer/theme/default/layer.css">

    <!--3.引入bootstrap中的Jquery框架；-->
    <script src="bootstrap/js/jquery.min.js"></script>
    <!--4.引入bootstrap中的Js框架；-->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular-route.js"></script>

    <!--<script src="//unpkg.com/angular-ui-router@0.4.2/release/angular-ui-router.js"></script>-->
    <!--6.引入AngularJS分布的JS框架-->
    <script src="angularjs/pagination.js"></script>

    <script src="layer/layer.js"></script>

    <style scoped>
        * {
            padding:0;
            margin:0;
        }

        li.active {
            background-color: #333;
        }
        .box {
            width:100%;
            height:300px;
            margin:0px auto;
            position:relative;
            overflow:hidden;
        }
        .swiper li {
            list-style:none;
            width:100%;
            height:300px;
        }
        .dot li {
            list-style:none;
            width:100%;
            height:300px;
        }
        .swiper img {
            width:100%;
            height:100%;
            vertical-align:top;
        }
        .swiper {
            width:500%;
            height:300px;
            position:absolute;
            left:0;
            top:0;
        }
        .swiper li {
            width:20%;
            float:left;
        }
        .swiper li img {
            width:100%;
        }
        .dot {
            position:absolute;
            display:flex;
            right:50%;
            bottom:0;
            transform:translate(50%,0);
            margin-bottom:8px;
        }
        .dot li {
            width:15px;
            height:15px;
            border-radius:50%;
            background-color:#fff;
            margin-right:5px;
        }
        .dot .active {
            background-color:burlywood;
        }
        .left,.right {
            font-family: "宋体";
            width:60px;
            height:60px;
            background-color:rgba(0,0,0,0.6);
            position:absolute;
            top:50%;
            transform:translate(0,-50%);
            color:yellowgreen;
            font-size:50px;
            text-align:center;
            line-height:60px;
            cursor:pointer;
        }
        .right {
            right:0;
        }
    </style>



</head>
<body  ng-app="inApp"  ng-init="getwe()" ng-controller="inCtrl">

<div  class="wrapper" style="width: 100%;margin: 0 auto;border: 0;padding: 0">

    <!--最上方小导航栏-->
    <div ng-include=" 'other/top.html' "></div>

    <!--主要导航栏-->
    <div class="navbar navbar-default " role="navigation" style="background-color: white;height: 80px;margin-bottom: 0px;padding-top: 18px">
        <!--navbar-fixed-top-->
        <div class="navbar-header">
            <a class="navbar-brand" href="#" style="padding-top: 0px">
                <img alt="Brand" src="imgs/zlhl.jpg" width="100" height="90">
            </a>
        </div>

        <ul class="nav navbar-nav navbar-left">
            <a class="navbar-brand" href="#" style="color: black;font-size: 36px;">知领互联</a>
            <a class="navbar-brand" href="#" style="color: black"><strong>【{{city}}】</strong></a>
            <a class="navbar-brand" href="#" style="color: black;font-size: 18px" ng-if="uname != '' ">欢迎您！【{{uname}}】</a>
            <!--<a class="navbar-brand" href="#!/logout" style="color: black;font-size: 18px">注销</a>-->

        </ul>
        <ul class="nav navbar-nav navbar-right">
            <!--class="active"-->
            <!--<li ><a href="#!/home" style="color: black;font-size: 18px">首页</a></li>-->
            <li ><a href="register.html" ng-if="uname=='' " style="color: black;font-size: 18px">注册</a></li>
            <li ><a href="login.html" ng-if="uname=='' " style="color: black;font-size: 18px">登录</a></li>

            <li><a href="#!/test-router2" style="color: black;font-size: 18px">{{mytimer}}</a></li>
            <li><a href="" style="color: black;font-size: 18px">{{wether}}  |  {{templow}}～{{temphign}}</a></li>&nbsp;&nbsp;&nbsp;

        </ul>
    </div>

    <!--第三个导航栏-->
    <nav class="navbar navbar-inverse" role="navigation" style="margin-bottom: 0px">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">知领互联银行汇款转账交易系统</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <!--<li><a href=""><span class="glyphicon glyphicon-user" ng-click="dj()"></span>我的账户</a></li>-->

                <li class="dropdown">
                    <a href="#" id="zh2" class="dropdown-toggle" data-toggle="dropdown">
                        <span class!="glyphicon glyphicon-user" >

                        </span>我的账户
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" style="text-align: center">
                        <li><a  id="zh" href="user/userinfo.html">账户信息</a></li>
                        <li class="divider"></li>
                        <li><a href="user/bankinfo.html">银行卡</a></li>
                        <li class="divider"></li>
                        <li><a href="deal.html">明细</a></li>

                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" id="cz2" class="dropdown-toggle" data-toggle="dropdown">
                        <span class!="glyphicon glyphicon-user" >

                        </span>用户操作
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" style="text-align: center">
                        <li><a  id="cz" href="regCard.html">账户申请</a></li>
                        <li class="divider"></li>
                        <li><a href="frozen.html">用户冻结</a></li>

                    </ul>
                </li>
                <li><a href="onlinebank.html" ><span class="glyphicon glyphicon-shopping-cart"></span>网银转账</a></li>
                <!--<li><a href="#/transfer" id="zz"><span class="glyphicon glyphicon-user"></span>汇款转账</a></li>-->
                <li class="dropdown">
                    <a href="#" id="zz2" class="dropdown-toggle" data-toggle="dropdown">
                        <span class!="glyphicon glyphicon-user" >

                        </span>汇款转账
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" style="text-align: center">
                        <li><a  id="zz">境内转账</a></li>
                        <li class="divider"></li>
                        <li><a href="transfer/annul.html">撤销转账</a></li>
                        <li class="divider"></li>
                        <li><a href="">境外转账</a></li>

                    </ul>
                </li>
                <!--<li><a ><span class="glyphicon glyphicon-open"></span>账户申请</a></li>-->
                <li class="dropdown">
                    <a href="#" id="set" class="dropdown-toggle" data-toggle="dropdown">
                        <span class!="glyphicon glyphicon-user" >

                        </span>设置
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" style="text-align: center">
                        <li><a  id="uppwd" href="/updatepwd.html">修改密码</a></li>
                        <li class="divider"></li>
                        <li><a href="">其他</a></li>
                        <li class="divider"></li>
                        <li><a href="#" ng-click="logout()">退出</a></li>

                    </ul>
                </li>

            </ul>
        </div>
    </nav>

</div>


<div>
    <ol class="breadcrumb" style="margin-top: 0px;margin-bottom: 0;">
        <li><a >Home</a></li>
        <li><a >银行</a></li>
        <li><a>首页</a></li>
    </ol>
</div>


<!-- 内容 -->
<div class="content">
    <!--4 布局模板 占位符 -->
    <div ng-view></div>
</div>


<div class="navbar navbar-default " role="navigation" style="margin-bottom: 0px;">
    　<div class="navbar-header" style="padding-left: 30px">
    　	<a href="##" class="navbar-brand">知领互联</a>
    　</div>
    <div style="float: right;">

        <ul class="nav navbar-nav">
            <li class="active"><a href="##">交易转账系统</a></li>
            <li><a href="##">客户服务</a></li>
            <li><a href="##">新闻在线</a></li>
            <li><a href="##">隐私政策</a></li>
            <li><a href="##">关于我们</a></li>
        </ul>

    </div>
</div>
<script>
    layerindex=-1;
    var  app = angular.module('inApp',['pagination','ngRoute']);    //定义一个模块； cityApp
    app.controller("inCtrl",function ($scope, $http) {    //定义一个控制器； cityCtrl  ,  $http 调用接口！  http://localhost:8080/citys/list.action

        $scope.mytimer=new Date().toLocaleDateString();
        $scope.city="";
        $scope.wether="";
        $scope.templow="";
        $scope.temphign="";
        $scope.uname="";

        //token
        $http.post('http://localhost:12000/user/tourist/token').then(function (data) {  //正确请求成功时处理
            console.log(data)
            if (data.data.code == 202) {
            }else{
                window.sessionStorage.removeItem("uname");
                $scope.uname="";
            }
        }).catch(function (result) { //捕捉错误处理
            console.info(result);
        });

        //获取ip
        $scope.getwe=function(){
            $http.get('/tool/ip', {
                params: {
                }
            }).then(function (result) {  //正确请求成功时处理
                $scope.city=result.data.city;
                console.info(result.data.data.city);
                //alert(result.data);
                $scope.city=result.data.data.city;

                //获取天气
                $http.post('/tool/tq', $scope.city).then(function (result) {  //正确请求成功时处理
                    $scope.wether=result.data.result.weather;
                    $scope.templow=result.data.result.templow;
                    $scope.temphign=result.data.result.temp;

                    var un = window.sessionStorage.getItem("uname");
                    if(un!=null&&un!=""){
                        $scope.uname=un;
                        console.log($scope.uname+"-------------")
                    }

                    console.log(result.data.result.templow);
                    console.log(result.data.result.temphigh);
                    //console.log(data.result.weather)

                }).catch(function (result) { //捕捉错误处理
                    console.info(result);
                    //alert(result.data.Message);
                });
            }).catch(function (result) { //捕捉错误处理
                console.info(result);
                //alert(result.data.Message);
            });

        }

        //退出登录
        $scope.logout=function () {
            layer.close(layerindex);
            layer.msg("已退出登录",{icon:6,title:"系统提示："});
            window.sessionStorage.removeItem("token")
            window.sessionStorage.removeItem("uname");

            window.location.href='/login.html';
        }

    });
    //路由配置
    app.config(['$routeProvider', function($routeProvider){
        $routeProvider
            .when('/home', {
                // template: '<h1>index Pages!</h1>',
                templateUrl: '/other/home.html'
            })
            .when('/image', {
                // template: '<h1>index Pages!</h1>',
                templateUrl: '/image.html'
            })
            .when('/cart', {
                templateUrl: '/cart.html'
            })
            .when('/register', {
                templateUrl: '/register.html',
            })
            .when('/login', {
                templateUrl: '/login.html', // 视图模板
            })
            .when('/deal', {
                templateUrl: '/deal.html', // 视图模板
            })

            .when('/register', {
                templateUrl: '/register.html', // 视图模板
            })
            .when('/transfer', {
                templateUrl: '/transfer.html', // 视图模板
            })
            .when('/annul', {
                templateUrl: '/transfer/annul.html', // 视图模板
            })
            .otherwise({
                redirectTo: '/home'
            });
    }]);



    //转账界面
    $(function () {
        $('#zz').click( function () {
            $('#myModal').modal('show')
        })
        $('#submit').click( function () {
            $('#myModal').modal('hide')
        })
    });

    $(function() {
        var index = 0; // 设置全局的轮播下标
        var timer = null; // 记录定时器的编号
        // 获取大盒子box的宽度
        var boxWidth = $(".box").width();
        console.log(boxWidth);

        // 启动定时器
        autoPlay();

        // 小圆点点击事件
        $(".dot li").click(function() {
            console.log(this);
            // active显示在点击的小圆点上
            $(this).addClass("active").siblings().removeClass("active");
            // 获取小圆点的下标
            index = $(this).index();
            console.log(index);
            // 显示对应下标的图片
            $(".swiper").css({
                left: -boxWidth * index
            })
        })

        // 上翻页
        $(".left").click(function() {
            // 限流
            if ($(".swiper").is(":animated")) {
                return false;
            }
            // 点击一下，图片下标-1
            index--;
            move();
        })
        // 下翻页
        $(".right").click(function() {
            console.log($(".swiper").is(":animated"));
            if ($(".swiper").is(":animated")) {
                return false;
            }
            index++;
            move();
        })


        // 封装自动播放的函数
        function autoPlay() {
            // 启动前先清除定时器
            clearInterval(timer);
            // 设置定时器
            timer = setInterval(function() {
                index++;
                move();
            }, 3000)
        }

        // 封装联合图移动的函数
        function move() {
            // 移动到临界时判断
            if (index < 0) {
                // 下标小于0时，显示最后一张
                index = $(".dot li").length;
                // 联合图移动相应的距离
                $(".swiper").css({
                    left: -boxWidth * index
                })
                // 过渡作用
                index--;
            }
            if (index > $(".dot li").length) {
                // 下标大于小圆点下标时，显示第一张
                index = 0;
                $(".swiper").css({
                    left: 0
                });
                // 过渡作用
                index++;
            }
            // 判断是否是第五张 如果是第五张 把第一个点变为active状态
            $(".dot li").eq(index == $(".dot li").length ? 0 : index).addClass("active").siblings().removeClass("active");
            // 联合图轮播运动(向左挪)
            $(".swiper").stop().animate({
                left: -boxWidth * index
            }, function() {
                // 播到最后一张时，回到第一张
                if (index >= $(".dot li").length + 1) {
                    index = 0;
                    $(".swiper").stop().animate({
                        left: 0
                    })
                }
            })
        }
    })
</script>

<!-- 按钮触发模态框 -->

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">汇款转账</h4>
            </div>
            <div class="modal-body">
                <div style="text-align: center;color: red;"><h2>请选择汇款类型</h2></div>
                <div class="panel-body">
                    <div class="col-md-9 col-md-offset-1">
                                <div class="form-group">
                                    <div class="form-group">
                                        <a class="btn btn-primary col-sm-offset-2 col-md-3" id="submit"
                                         href="transfer.html"  value="" type="button" >单笔汇款</a>
                                    </div>
                                    <div class="form-group">
                                        <a class="btn btn-warning col-sm-offset-4 col-md-3" id="submit1"
                                           href="transfer/RegAccTran.html" type="button" >账户汇款</a>
                                    </div>
                                    <!--<div class="form-group">-->
                                        <!--<a class="btn btn-danger col-sm-offset-1 col-md-3" id="submit2"-->
                                           <!--href="#/annul" type="button" >撤销转账</a>-->
                                    <!--</div>-->
                                </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
</html>